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Abstract: The unpreparedness of educators and students in the learning process becomes weakness in traditional learning. Moreover, teac hing material 
that has been delivered cannot be repeated while the small notes and educator explanations have limitations in knowledge transfer. This method is 
ineffective and also have limited learning space and time that cannot be accessed anytime and anywhere. In the current development, students have 
tendency and dependence on digital content or ICT. The condition is of positive value for online or virtual learning activities, teaching materials can be 
accessed, stored and shared through the internet. The research and development objective are to produce an LMS-based E-Learning system that is 
tested on Microteaching in the Mechanical Engineering Education class. The research method adopts the Hannafin and Peck approach model with 
specific phases (needs analysis, design, development and implementation). The developed LMS is then validated by media experts and material experts 
according to their capabilities. The research subjects were 15 undergraduate students aged + 22-25 years old (adults). Data collection techniques are 
using questionnaires and direct observation. The results of LMS-based E-Learning development research is "very feasible" to be used. The assessment 
is based on the LMS usability, LMS functions, visual communication, learning design, material contents, as well as language and communication. The 


findings in this study are that using LMS increases satisfaction and quality of learning. 


Index Terms: System E-Learning, LMS, Vocational Education, Virtual Class, Design and Development 


1. INTRODUCTION 

The learning characteristics of 21st century are new forms in 
the utilization of ICT learning [1], digitalization and E-learning 
[2] [3]. Social media, in the form of facebook [4], whatsapps, 
lines, etc., are often involved in the concept of virtual learning 
[5]. This concept shifts the role of traditional learning to be 
improved more effectively by taking advantage of students' 
current habits. E-learning can improve teaching and learning 
activities and be more efficient. Teachers must prepare 
teaching materials properly before they are being accessed 
and stored in repositories. The concept of E-Learning or virtual 
classrooms is an alternative learning in various universities [6], 
[7] and used for long distance learning [8], although it is 
realized that the emotional level of direct learning will be 
degraded. The development of E-learning technology is very 
rapid and this is one of the reasons why this concept is 
important to be implemented and developed massively. The 
urgency factors are class limitations, boredom in learning, and 
limited interactions. Online learning is cooperative in nature. It 
requires high levels of interaction and collaboration [9] [10], 
[11] to be successful. The researcher argues based on survey 
results, developments in various universities [12], [13] as well 
as strong statements by the OECD, that more and more 
learning is developed online. Students in mechanical 
engineering education have the devices to connect to on-line 
networks [14]. The success of on-line learning depends on the 
existence of wifi facilities that are connected to smartphone or 
computer. All students in Mechanical Engineering Education 
have those preconditions for E-Learning. So, E-learning will be 
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developed in the form of software applications namely LMS, to 
organize learning materials. LMS is designed according to the 
need to facilitate the packaging of interactive multimedia, 
teaching materials, lecture assignments, online discussions, 
learning videos and even interactive video conferences [15]. 


2 RESEARCH METHOD 
This LMS research uses research and development methods. 
There are 5 media experts, 5 material experts, and 15 
students who were involved in assessing and participating in 
E-Learning for microteaching learning competencies designed 
for teacher apprenticeship at Vocational High Schools (VSS). 
This research develops LMS-based E-Learning with Hannafin 
and Pack approach models [16]. This development model is 
divided into three phases which are: phase |, requirements 
assessment; phase Il, design; and phase III, development and 
implementation. Evaluations and revisions are carried out in all 
three phases of this development model. Phase 1, the 
researcher identifies the objectives and learning material to be 
designed and analyzed for LMS data requirements. The next 
phase, phase Il, prepare a development flowchart, LMS 
Storyboard, and an Outline of the LMS-based E-Learning 
Media Content. The final phase, phase Ill, is carried out by 
developing documents in the form of boards or learning 
spaces until a complete LMS is formed. The developed LMS is 
tested on small groups and large groups to see the user's 
response. This stage requires many references by experts in 
their fields as well as documenting LMS problems as a 
reference for improvement and reflective development. LMS 
development process builds menus with several programming 
languages, this work is complicated, and the failure rate is 
high. During the ongoing phase, the evaluation and revision 
process is conducted also, to improve the quality and function 
of the LMS. 
LMS validation was carried out by five media experts 
according to their field and five material experts according to 
their scientific fields. Data collection uses questionnaires and 
observation instruments with a Likert scale of 1-5 [17]. A score 
of 5 indicates a very high argument and a score of 1 indicates 
a shallow case. Scores are scored in percentages and 
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grouped according to the "feasible" category. Students’ 
responses are collected from small and limited groups to see 
how much E-learning by LMS has influenced their learning. 


3 RESULT AND DISCUSSION 


3.1 Fase Need Assessment 

This phase aims to identify the learning requirements before 
LMS development is carried out. Researcher data are the form 
of student activity in network media, and also infrastructure 
capacity in the form of wifi is an important consideration. The 
main thing to consider is that LMS improves the quality of 
learning, and LMS can be implemented continuously, and its 
features can even be developed further. The student difficulty 
in learning micro-teaching became problem focus and 
information input in developing GBIM. Researchers considered 
students’ activities during packaging teaching materials, 
preparation of devices, and delivery of content that is not 
systematic. Pedagogical competencies of teacher candidates 
must be mastered and developed before being applied to 
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vocational schools. This makes sense for researchers, 
vocational education, in addition to teaching competencies to 
students, is also required to be able to teach the stages in 
mastering competencies across various characteristics of 
students, the variety that even can lead to misconceptions. 
Through LMS, prospective teachers can see the performance 
of their teaching then do self-reflection. The advantage of LMS 
is that the learning process is well stored and can be seen at 
any time. That reflection process can lead to new strategies. It 
can be concluded that prospective teachers need a lot of 
teaching materials and interactive videos that fit the learning 
objectives. 


3.2 Fase Design 

The design phase was based on study space requirements 
analysis. Development data was in the form of a flowchart of 
the LMS program, Storyboard that is a display of features or 
menus needed and developed, and GBIM that is the learning 
support contents. The design results are displayed in the 
following figure: 
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Figure 1. Layout and LMS Class Academic Flowchart 


The flowchart display is divided into two separate sections: (1) 
academic menu in the form of class schedules, Study Result 
Cards, Study Plan Cards, and Academic information; and (2) 
LMS or virtual class menus in the way of video conferences, 
lecture materials, lecture assignments, learning videos, online 
discussions, and file sharing. Then flowchart is translated into 
a storyboard that contains the interface, location of the menu, 
integration between menus in the form of frame and so on. 
The design phase ends with the development of GBIM, what 
material will be equipped for each menu bar. Teaching 
materials that have been classified and meet the learning 
process are then made into menu bars on a virtual display that 


can be accessed by lecturers and students. 


3.3 Fase Design and Implementation 

Researchers consult developer experts to arrange menu bars 
on virtual displays. The time needed is quite long. Errors in 
programming languages, Html, coding lead to mistakes in 
giving commands. In addition, it is necessary to evaluate this 
by several parties, to collect input in the form of menu bar work 
functions, color, design, content, discussion, and 
communication before conducting validation based on the 
instrument. The results of media development are shown in 
the following design drawings: 
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Figure 2. Display for Student and Lecturer in LMS 


Students and lecturers by the learning schedule log in using 
their identity numbers and choose study spaces according to 
subjects. Virtual learning does not need to be present in class 
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and agreed to use LMS, this learning can be done anywhere 
but discipline for learning time is a full concern. 


Figure 3. Display Function Menu Bar Discussion and Video Conference 


LMS is equipped with a discussion and video conference 
menu bar to make it more dynamic. Educators can monitor 
how active his students during learning, to avoid taking over by 


others. LMS also can chat and managing student assignments 
in this virtual classroom 
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Figure 4. Individual Learning Outcomes in the Four Meetings Trial 


After having results of testing the menu bar on developed 
LMS, then testing or validation of LMS by five media experts 
and 5 material experts was carried out. Media expert judgment 
consists of three domains, usability, functional, and visual 


communication. The material expert assessment included of 
three domains, namely LMS learning design, LMS material 
content, language, and communication. The LMS validation 
results are as follows: 


TABLE 17. 
Media Expert and Material Expert Validation Results 
F Total 
Variable of LMS Nuriber SA A U D SD Total Average Category 
25 236 9 6 0 78,86 
Use ot EMS 350 (14) (9,06%) (85.51%) _(3,26%) (2.17%) (0%) (100%) 
Function of 60 156 6 2 2 82,18 
ae e LsMS 275(11) (95.55%) _(69,03%) _(2,65%) _(0,88%) _(0,88%) (100%) 79,18% a : 
ae — 200 20 120 3 10 0 76,50 
ommunication 
of LMS (8) (13,07%)  (78,43%)  (1,96%)  (6,54%) (0%) (100%) 
Learning 150 34 76 6 6 0 82,00 
Design of LMS 6 28,46% 61,79% 4,88% 4,88% 0% 100% 
Content 40 136 6 2 3 74,80 
Expert of : 250 (10) ; Very 
aaietal material of LMS (21,39%) _(72,73%) _(3,21%) _(1,07%) —_(1,60%) (100%) 80,71% Sa eibis 
a suegs - 2 150 60 64 3 0 1 85,33 
ommunication r) tC) 
of LMS (6) (46,88%)  (50,00%)  (2,34%) (0%) (0,78%) (100%) 
Notes: (SA/5) Strongly Agree; (A/4) Agree; (U/3) Undecided; (D/2) Disagree; dan (SD/1) Strongly Disagree 
The results of the validation from media experts and material Variable of Re Sak (%) iverdge: | Catedory 
experts produced average scores of respectively 79.18% from __Respondent umber 
media experts and 80.71% from material experts, and those alate ofume 200 187  93,5% 
are in the "very feasible" category. Material experts said that ienpusde “and 
the function of the LMS was by the needs of vocational Communication 150 132  88,0% 
education [18], [19]. Furthermore, the developed visual of LMS 
communication meets the LMS principles. Respondents' trials _ Test Respondents as many as 15 people 
were carried out in two stages: a small group consisting of five Learning 420 365 86.90% 
le and a| f fif le. Th f this _Design of LMS 
people and a large group of fifteen people. The purpose of this 7 
test was to see the quality of LMS based on user responses in Content 560 498  88,92% 5 Very 
he. : R d | h aah material of LMS 88,45% Esasibie 
the learning process. Respondent results are shown in the —[anguage and 
following table. Communication 420 376 —89,52% 
of LMS 
TABLE 2. 
Respondent Test Results Against LMS Based on the respondent test results, the scores were 87.83% 
Variable of Total in the small group test and 88.45% in the limited group test. 
Skor % Average Categor : 

Respondent___ Number al : 9°"Y _ Score results were in the same range. Thus, LMS brought 
lean as many as five people a positive influence and a high level of satisfaction [9], [9] in 
Design of LMS 150 123 82,0% 87,83% Feasible Microteaching learning in vocational education. 
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CONCLUSION 

The design and development of the E-learning system include 
the requirements analysis, design, and development and 
implementation, and evaluation is carried out at each stage. 
The primary step that becomes the principle of development is 
the availability of guided flowcharts, storyboards and GBIM 
and adjusted to the characteristics of vocational education. 
The validation results showed that the feasibility level was 
79.18% and 80.71% for media experts and material experts. 
This indicates that e-learning by LMS meets the media and 
material needs of vocational education. Students’ responses in 
assessing LMS are positive and stable in small and limited 
group testing. In this case, students have the very good 
interest and satisfaction. 
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